<template>
  <view class="container">
    <!-- 设备信息 -->
        <view class="device-info">
          <view class="info-item">
            <text class="info-label">设备名称 ：</text>
            <text class="info-value">{{powerbank.devicename}}</text>
          </view>
          <view class="info-item">
            <text class="info-label">电量 ：</text>
            <text class="info-value">{{powerbank.electric}}%</text>
          </view>
          <view class="info-item">
            <text class="info-label">温度 ：</text>
            <text class="info-value">{{powerbank.temperature}}%</text>
          </view>
		  <view class="info-item">
		    <text class="info-label">湿度 ：</text>
		    <text class="info-value">{{powerbank.humidity}}%</text>
		  </view>
          <view class="info-item">
            <text class="info-label">电池健康度：</text>
            <text class="info-value">{{powerbank.cell}}%</text>
          </view>
        </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app'

const powerbank = ref({});

onLoad((options) => {
  console.log(options);

  if (options.deviceData) {
    try {
      const deviceData = JSON.parse(decodeURIComponent(options.deviceData));
      console.log('设备数据:', deviceData);

      powerbank.value = deviceData;
      const electric = Number(deviceData.electric) || 0;
      console.log('当前电量:', electric);

      if (electric < 20) {
        uni.showModal({
          title: '低电量提醒',
          content: `当前电量仅${electric}%，请及时充电！`,
          confirmText: '知道了',
        });
      }
    } catch (error) {
      console.error('数据解析失败:', error);
      uni.showModal({ title: '设备数据解析失败', icon: 'none' });
    }
  } else {
    uni.showModal({ title: '设备数据缺失', icon: 'none' });
  }
});
</script>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
  background-color: #ffffff;
  min-height: 100vh;
}

.device-info {
  margin-bottom: 40rpx;
  
  .info-item {
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #eee;

    &:last-child {
      border-bottom: none;
    }

    .info-label {
      font-size: 32rpx;
      color: #666;
      width: 240rpx;
      letter-spacing: 2rpx;
      
      &::after {
        content: " ";
        display: inline-block;
        width: 10rpx;
      }
    }

    .info-value {
      font-size: 34rpx;
      color: #333;
      font-weight: 500;
      flex: 1;
    }
  }
}

</style>